<template>
	<view class="borderStyle">
		<text class="fontStyle">告警</text>
	</view>
	<divider></divider>
	<view>
		<uni-list-chat title="有车辆驶出运营范围" avatar="../../static/告警.png" note="您收到一条新的告警消息" time="2024-01-19 20:20"
			badge-positon="left" :badgeText="badgeText1" clickable="true"
			@click="handleItemAndMessageClick(1, 'error')"></uni-list-chat>
		<uni-list-chat title="有车辆形式超速" avatar="../../static/告警.png" note="您收到一条新的告警消息" time="2024-01-17 15:10"
			badge-positon="left" :badgeText="badgeText2" clickable="true"
			@click="handleItemAndMessageClick(2, 'error')"></uni-list-chat>
		<uni-list-chat title="驾驶员异常用车" avatar="../../static/告警.png" note="您收到一条新的告警消息" time="2024-01-13 12:00"
			badge-positon="left" :badgeText="badgeText3" clickable="true"
			@click="handleItemAndMessageClick(3, 'error')"></uni-list-chat>
	</view>
	<divider></divider>
	<view class="borderStyle">
		<text class="fontStyle">预警</text>
	</view>
	<divider></divider>
	<view>
		<uni-list-chat title="有车辆行驶即将超速" avatar="../../static/预警.png" note="您收到一条新的预警消息" time="2024-01-18 19:30"
			badge-positon="left" :badgeText="badgeText4" clickable="true"
			@click="handleItemAndMessageClick(4, 'warn')"></uni-list-chat>
		<uni-list-chat title="有车辆即将驶出运营范围" avatar="../../static/预警.png" note="您收到一条新的预警消息" time="2024-01-12 07:00"
			badge-positon="left" :badgeText="badgeText5" clickable="true"
			@click="handleItemAndMessageClick(5, 'warn')"></uni-list-chat>
	</view>

	<view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确定" title="通知" content="驾驶员李四驶出运营范围,请及时监督"
				></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import Divider from "/components/divider/divider.vue"
	export default {
		data() {
			return {
				badgeText1: "dot",
				badgeText2: "dot",
				badgeText3: "dot",
				badgeText4: "dot",
				badgeText5: "dot",
				type: 'center',
				msgType: '',
			}
		},
		comments: {
			Divider
		},
		methods: {
			handleItemClick(index) {
				// 使用 switch 语句根据索引执行不同的逻辑
				switch (index) {
					case 1:
						this.badgeText1 = '';
						break;
					case 2:
						this.badgeText2 = '';
						break;
					case 3:
						this.badgeText3 = '';
						break;
					case 4:
						this.badgeText4 = '';
						break;
					case 5:
						this.badgeText5 = '';
						break;
				}
			},
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			handleItemAndMessageClick(index, messageType) {
				// 调用 handleItemClick 和 messageToggle 方法
				this.handleItemClick(index);
				this.dialogToggle(messageType);
			}

		}
	}
</script>

<style lang="scss">
	.borderStyle {
		margin-top: 30rpx;
		margin-left: 30rpx;
		/* margin-bottom: 10rpx; */
	}

	.fontStyle {
		font-size: 40rpx;
		font-weight: bold;
	}

	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}

	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.box {
		@include flex;
	}

	.button {
		@include flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

	.popup-height {
		@include height;
		width: 200px;
	}

	.text {
		font-size: 12px;
		color: #333;
	}

	.popup-success {
		color: #fff;
		background-color: #e1f3d8;
	}

	.popup-warn {
		color: #fff;
		background-color: #faecd8;
	}

	.popup-error {
		color: #fff;
		background-color: #fde2e2;
	}

	.popup-info {
		color: #fff;
		background-color: #f2f6fc;
	}

	.success-text {
		color: #09bb07;
	}

	.warn-text {
		color: #e6a23c;
	}

	.error-text {
		color: #f56c6c;
	}

	.info-text {
		color: #909399;
	}

	.dialog,
	.share {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.dialog-box {
		padding: 10px;
	}

	.dialog .button,
	.share .button {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		margin: 0;
		margin-top: 10px;
		padding: 3px 0;
		flex: 1;
	}

	.dialog-text {
		font-size: 14px;
		color: #333;
	}
</style>